<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>

<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 对标签属性的限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">
    //创建组件
    // class Person extends React.Component {
    //
    //     constructor(props) {
    //         super();
    //     }
    //     //检验规则
    //     static propTypes = {
    //         name: PropTypes.string.isRequired, //字符串类型,必传
    //         sex: PropTypes.string,
    //         age: PropTypes.number,
    //         speak: PropTypes.func//限制speak为函数
    //     }
    //     //默认值
    //     static defaultProps = {
    //         sex: '未知',
    //         age: 18
    //     }
    //
    //     render() {
    //         console.log(this);
    //         const {name, age, sex} = this.props
    //         return (
    //             <ul>
    //                 <li>{name}</li>
    //                 <li>{age}</li>
    //                 <li>{sex}</li>
    //             </ul>
    //         )
    //     }
    // }

    function Person(props) {
        console.log(props);
        const {name, sex, age} = props;
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        )
    }

    //检验规则
    Person.propTypes = {
        name: PropTypes.string.isRequired, //字符串类型,必传
        sex: PropTypes.string,
        age: PropTypes.number,
        speak: PropTypes.func//限制speak为函数
    }
    //默认值
    Person.defaultProps = {
        sex: '未知',
        age: 18
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="tom" />, document.getElementById('test1'))
</script>
</body>
</body>

</html>
